<!--
 * @Author: your name
 * @Date: 2021-04-17 10:28:30
 * @LastEditTime: 2021-04-19 16:30:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \智慧医疗项目\app\src\views\pages\home.vue
-->
<template>
  <div class="home">
    <el-container>
      <el-header>
        <h1>智慧医疗后台管理系统</h1>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div class="top">
            <span>*</span>
            <span><i class="el-icon-top-right"></i></span>
          </div>
          <img class="avatar" :src="avatar" alt="">
          <div class="user">
            管理员
          </div>
          <el-menu
            :unique-opened="true"
            class="el-menu-vertical-demo"
            background-color="steelblue"
            text-color="#fff"
            :router="true"
          >
            <el-submenu :index='item.path' v-for="(item, index) in routes" :key="index">
              <template slot="title">
                <span>{{item.meta.title}}</span>
              </template>
              <el-menu-item :index='items.path' v-for="(items, indexs) in item.children" :key="indexs">
                <template>
                <span>{{items.meta.title}}</span>
              </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import routes from '../mock/routes'
import avatar from '../assets/avatar.png'
export default {
  data() {
    return {
      routes,
      avatar
    }
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}

.el-header {
  width: 100%;
  background-color: skyblue;
  color: #fff;
  line-height: 60px;
}

.top {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 5px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-left: 60px;
}

.user {
  width: 100%;
  height: 30px;
  font-size: 17px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.el-aside {
  background-color: steelblue;
}

.el-menu-item {
  text-align: center;
}

</style>